import styled from 'styled-components';

export const HeaderWrapper = styled.div`
  font-size: 14px;
  /* width: 100%; */

  &.fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
  }

  /* position: relative; */
  /* position: ${(props) => (props.$isFixed ? 'fixed' : 'relative')}; */

  .content {
    position: relative;
    z-index: 99;
    background-color: ${(props) => (props.theme.isAlpha ? 'rgba(255,255,255,0)' : 'rgba(255,255,255,1)')};
    border-bottom: 1px solid #eee;
    border-bottom-color: ${(props) => (props.theme.isAlpha ? 'rgba(255,255,255,0)' : '#eee')};

    transition: all 250ms ease;

    .normal-header {
      display: flex;
      align-items: center;
      height: 80px;
    }
  }

  .cover {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    z-index: 9;
    background-color: rgba(0, 0, 0, 0.3);
  }
`;


export const SearchAreaWrapper = styled.div`
  height: ${(props) => props.$isSearch ? '100px' : '0'};
  transition: height 250ms ease;
`;